<!DOCTYPE html>
<html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		@import url(./../lib/Cesium/Widgets/widgets.css);

		body,
		html,
		#map {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>

	<script src="./../lib/lodash.min.js"></script>
	<script src="./../lib/Cesium/Cesium.js"></script>
	<title>圆圈警戒扫描</title>
</head>

<body onload="onload()">
	<div id="map"></div>
</body>

</html>
<script type="text/javascript">
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NTFhMDMwMi02YWVjLTRmNmItOThjNS00MDI1YTVkNjdhODciLCJpZCI6NTY0Miwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzgyNzA5MH0.4OIh4gPgWSceyKB4iHliAX59933ryNrXBwVut46WE78'
	function onload() {
		const viewer = new Cesium.Viewer("map", {
			animation: false, //是否创建动画小器件，左下角仪表
			baseLayerPicker: false, //是否显示图层选择器
			fullscreenButton: false, //是否显示全屏按钮
			geocoder: false, //是否显示geocoder小器件，右上角查询按钮
			homeButton: false, //是否显示Home按钮
			infoBox: false, //是否显示信息框
			sceneModePicker: false, //是否显示3D/2D选择器
			selectionIndicator: false, //是否显示选取指示器组件
			timeline: false, //是否显示时间轴
			sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
			navigationHelpButton: false, //是否显示右上角的帮助按钮
			scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
			navigationInstructionsInitiallyVisible: false,
			showRenderLoopErrors: false

		})
		viewer.scene.globe.depthTestAgainstTerrain = false;
		//去除版权信息
		viewer._cesiumWidget._creditContainer.style.display = 'none';


		var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
		var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
		viewer.scene.camera.setView({
			destination: initialPosition,
			orientation: initialOrientation,
			endTransform: Cesium.Matrix4.IDENTITY
		});

		//添加在线3dtiles
		var tileset = new Cesium.Cesium3DTileset({url: Cesium.IonResource.fromAssetId(5741)});
		viewer.scene.primitives.add(tileset);

		/*
			 添加扫描线 depth关闭   lon:-74.01296152309055 lat:40.70524201566827 height:129.14366696393927
			 viewer
			 cartographicCenter 扫描中心
			 maxRadius 最大半径 米
			 scanColor 扫描颜色
			 duration 持续时间 毫秒
			 */
		function AddCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) {
			var ScanSegmentShader =
				"uniform sampler2D colorTexture;\n" +
				"uniform sampler2D depthTexture;\n" +
				"varying vec2 v_textureCoordinates;\n" +
				"uniform vec4 u_scanCenterEC;\n" +
				"uniform vec3 u_scanPlaneNormalEC;\n" +
				"uniform float u_radius;\n" +
				"uniform vec4 u_scanColor;\n" +
				"vec4 toEye(in vec2 uv, in float depth)\n" +
				" {\n" +
				" vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +
				" vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +
				" posInCamera =posInCamera / posInCamera.w;\n" +
				" return posInCamera;\n" +
				" }\n" +
				"vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +
				"{\n" +
				"vec3 v01 = point -planeOrigin;\n" +
				"float d = dot(planeNormal, v01) ;\n" +
				"return (point - planeNormal * d);\n" +
				"}\n" +
				"float getDepth(in vec4 depth)\n" +
				"{\n" +
				"float z_window = czm_unpackDepth(depth);\n" +
				"z_window = czm_reverseLogDepth(z_window);\n" +
				"float n_range = czm_depthRange.near;\n" +
				"float f_range = czm_depthRange.far;\n" +
				"return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +
				"}\n" +
				"void main()\n" +
				"{\n" +
				"gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +
				"float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +
				"vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +
				"vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +
				"float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +
				"if(dis < u_radius)\n" +
				"{\n" +
				"float f = 1.0 -abs(u_radius - dis) / u_radius;\n" +
				"f = pow(f, 4.0);\n" +
				"gl_FragColor = mix(gl_FragColor, u_scanColor, f);\n" +
				"}\n" +
				"}\n";
			var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);
			var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);
			var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);
			var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);
			var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);
			var _time = (new Date()).getTime();
			var _scratchCartesian4Center = new Cesium.Cartesian4();
			var _scratchCartesian4Center1 = new Cesium.Cartesian4();
			var _scratchCartesian3Normal = new Cesium.Cartesian3();
			var ScanPostStage = new Cesium.PostProcessStage({
				fragmentShader: ScanSegmentShader,
				uniforms: {
					u_scanCenterEC: function () {
						return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
					},
					u_scanPlaneNormalEC: function () {
						var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
						var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
						_scratchCartesian3Normal.x = temp1.x - temp.x;
						_scratchCartesian3Normal.y = temp1.y - temp.y;
						_scratchCartesian3Normal.z = temp1.z - temp.z;
						Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
						return _scratchCartesian3Normal;
					},
					u_radius: function () {
						return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;
					},
					u_scanColor: scanColor
				}
			});
			viewer.scene.postProcessStages.add(ScanPostStage);
		}
		// var Center = new Cesium.Cartographic(Cesium.Math.toRadians(-74.01881302800248), Cesium.Math.toRadians(40.69114333714821), 0);
		var Center = new Cesium.Cartographic.fromDegrees(-74.00881302800248,40.73114333714821, 0);
		 
		var scanColor = new Cesium.Color.fromRgba(0x00FF00CC);
		AddCircleScanPostStage(viewer, Center
			, 2000, scanColor, 5000)
	}

</script>